<template>
  <div>
    <a-form :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
      <a-form-item label="退回类型" required>
        <ZgSwitch :width="100" v-model="isSelf" :text="['本流程', '前置流程']"></ZgSwitch>
      </a-form-item>
      <a-form-item v-if="isSelf" label="选择环节" required>
        <a-table
          :data-source="list"
          :pagination="false"
          ref="table"
          :row-selection="{
            selectedRowKeys: ids,
            onChange: onSelectChange,
            columnWidth: 45,
          }"
        >
          <a-table-column title="环节名称" dataIndex="stepName"></a-table-column>
          <a-table-column title="环节编号" dataIndex="stepCode"></a-table-column>
          <a-table-column title="处理人" dataIndex="operUser"></a-table-column>
          <a-table-column title="生成时间" dataIndex="createTime"></a-table-column>
          <a-table-column title="处理时间" dataIndex="successTime"></a-table-column>
          <a-table-column title="是否推送共享">
            <template slot-scope="record">
              <span>{{ record.isPush === 1 ? '已推送' : '未推送' }}</span>
            </template>
          </a-table-column>
        </a-table>
      </a-form-item>
      <a-form-item v-if="!isSelf" label="选择环节" required>
        <a-tabs v-model="tab">
          <a-tab-pane v-for="item in tabList" :key="item.instCode" :tab="item.flowName"></a-tab-pane>
          <!-- <a-tab-pane key="2" tab="XX流程"></a-tab-pane> -->
        </a-tabs>
        <a-table
          :data-source="frontList"
          :pagination="false"
          :row-selection="{
            selectedRowKeys: ids,
            onChange: onSelectChange,
            columnWidth: 45,
          }"
        >
          <a-table-column title="环节名称" dataIndex="stepName"></a-table-column>
          <a-table-column title="环节编号" dataIndex="stepCode"></a-table-column>
          <a-table-column title="处理人" dataIndex="operUser"></a-table-column>
          <a-table-column title="生成时间" dataIndex="createTime"></a-table-column>
          <a-table-column title="处理时间" dataIndex="successTime"></a-table-column>
          <a-table-column title="是否推送共享">
            <template slot-scope="record">
              <span>{{ record.isPush === 1 ? '已推送' : '未推送' }}</span>
            </template>
          </a-table-column>
        </a-table>
      </a-form-item>
      <a-form-item label="退回理由" required>
        <ZgTextarea v-model="backDescs" @change="backDescsChange"></ZgTextarea>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  props: {
    flowInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    flowInfo: {
      handler (val) {
        this.initData(val)
      },
      deep: true,
      immediate: true
    },
    isSelf: {
      handler () {
        this.initData()
      }
    },
    newDate: {
      handler () {
        this.reset()
      }
    },
    tab: {
      handler (newVal) {
        // if (this.allList.length > 0) {
          this.tabClick(newVal)
        // }
      }
    }
  },
  data () {
    return {
      isSelf: true,
      tab: '',
      ids: [],
      tabList: [],
      frontList: [],
      list: [],
      allList: [],
      selectedRows: [],
      backDescs: ''
    }
  },
  methods: {
    initData () {
      this.$http.post(
        '/zg-autoflow/flow/settleWorkflowInstance/getQZInstCode',
        { instCode: this.flowInfo.instCode, type: this.isSelf ? 1 : 0 },
        (res) => {
          if (this.isSelf) {
            if (res.length > 0) {
              this.list = res[0].stepInstanceVoList
            }
          } else {
            if (res.length > 0) {
              this.tabList = res
              this.tab = res[0].instCode
              // this.frontList = res[0].stepInstanceVoList
              this.allList = res
            }
          }
        }
      )
    },
    tabClick (val) {
      const found = this.allList.find((item) => item.instCode === val)
      this.frontList = found ? found.stepInstanceVoList : []
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.ids = selectedRowKeys.slice(-1)
      this.selectedRows = selectedRows.slice(-1)
      this.$emit('returnList', this.selectedRows)
    },
    backDescsChange (val) {
      this.$emit('backDescsChange', val)
    },
    reset () {
      this.backDescs = ''
      this.selectedRows = []
      this.ids = []
    }
  }
}
</script>

<style scoped>
</style>
